﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<List<PaperSystem.Models.QuestionList>>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>组成试卷</title>
    <link type="text/css" href="/Content/common.css" rel="Stylesheet" />
    <style type="text/css">
        body,html{overflow-x:hidden;min-width:1024px;}
        .page_center{*position:relative;}/*解决IE6/7下滚动bug */
        .page_center_inner{padding:14px 80px 0 14px;}
        
        .paper_container{font-size:12px;font-family:"lucida Grande",Verdana;}/*同table_container*/
        
        /* paper_container */
        .paper_container{margin-top:10px;padding-bottom:10px;}
        .instruction{border-bottom:1px solid #999;margin-bottom:10px;}
        .paper_content{*zoom:1;padding:0 0 6px 0;margin:0 0 8px 0;background:#f9f9f9;position:relative;z-index:10;cursor:move;
            border:1px solid #ddd;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
        }
        .paper_content .ex_q_type{font-size:14px;margin:0 0 0 4px;}
        .paper_content_hover{border-color:#bbb;}
        .paper_content_remove_icon{display:none;width:20px;height:20px;overflow:hidden;position:absolute;z-index:11;top:2px;right:2px;cursor:pointer;background:url(/Content/images/icon.png) 0 0 no-repeat;text-indent:-9999px;}
        .paper_content_hover .paper_content_remove_icon{display:block;}
        .paper_content_placeholder{border:1px solid #fcefa1;height:100px;background:#fcefa1;}
        .q_in_q{*zoom:1;margin:4px 4px 0;}
        .q_ex_q{*zoom:1;margin:8px 4px 0;}
        .q_in_q:after,
        .q_ex_q:after{clear:both;content:"\20";display:block;height:0;}
        .q_left{float:left;width:92px;height:20px;line-height:20px;}
        .q_right{margin-left:100px;line-height:20px;}
        .info{padding:10px 0;}
        .paper_content .PIcontent {height:40px;line-height:20px;margin-left:8px;width:60%;}
        /* dragger */
        .dragger{position:absolute;left:-20px;top:0;width:20px;height:100%;cursor:pointer;background:#999 url(/Content/images/dragger_bg.png) 0 0 repeat-y;-webkit-box-shadow:-2px 0 4px 0 rgba(0,0,0,0.15);box-shadow:-2px 0 4px 0 rgba(0,0,0,0.15);}
        .dragger_inner{position:absolute;width:17px;height:62px;top:50%;left:-16px;margin-top:-31px;background:url(/Content/images/icon.png) 0 -26px no-repeat;}
        .dragger .in{background-position:-22px -26px;}
        
        /* table_container */
        .table_container{*zoom:1;position:absolute;width:800px;height:100%;right:-802px;top:0;background:#fff;border-left:1px solid #999;z-index:2000;}
        .table_container_inner{height:100%;overflow-y:auto;}
        .table_container_inner h2{font-size:14px;}
        .question_search_container{margin:4px 0;position:relative;font-size:14px;}
        .question_search_container .btn_blue{height:20px;line-height:20px;position:absolute;right:148px;top:2px;width:40px;height:40px;line-height:40px;font-size:14px;}
        .question_search_container input,
        .question_search_container select{width:120px;}
        .col_creator, .col_time, .col_course, .col_content, .col_type, .col_chapter, .col_knowledge, .col_TorE{height:100%;text-align:center;}
    </style>
</head>
<body>
    <div class="page_container">
	    <div class="page_left">
		    <div class="page_left_inner">
			    <h1 class="left_logo"><a href="#" class="logo" title="试题库系统">试题库系统</a></h1>
			    <%if (ViewData["userName"] != null){%>
			        <div class="left_message">欢迎您，<br/><%=ViewData["userName"]%>老师<br /><a href="/Login/Logout/" class="logout">退出</a></div>
			    <%} %>
			    <ul class="left_nav">
				    <li><a href="/Question/QuestionList">题库管理</a></li>
				    <li class="current"><a href="/Paper/PaperList/">试卷管理</a></li>
				    <li><a href="/Paper/PaperCorrectList1">改卷</a></li>
				    <li><a href="/Statistics/PaperList">统计</a></li>
			    </ul>
		    </div>
	    </div>
	    <!-- end page_left -->
	    <div class="page_center">
		    <div class="page_center_inner">
		    <form action="/Paper/PaperAdd/" method="post" id="paper_form">
			    <div class="tab_container">
				    <ul class="tab_nav">
					    <li><a href="/Paper/PaperList">查看试卷</a></li>
					    <li class="current">添加试卷</li>
				    </ul>
			        <div class="tab_content">
				        <div class="tab_content_inner">
				            <label>试卷名称:</label><input type="text" name="paper.paperTitle" class="data_confirm" data-confirm="required reHTML" />
				            <label>语种:</label><%=Html.DropDownList("paper.course", ViewData["course"] as SelectList)%>
				            <label>试卷用途:</label><select name="paper.TorE"><option value="考试">考试</option><option value="练习">练习</option></select>
				            <label>限时(分钟):</label><input type="text" name="paper.usedMinute" class="data_confirm" data-confirm="required int" style="width:100px;" />
				        </div>
			        </div>
			    </div>
			    <!-- end tab_container -->
			    <!-- content begin here -->
			    
			    <div class="paper_container" id="paper_container">
			    <div class="instruction">
			        <h2>说明：</h2>
			        <p>1.通过右方的移动面板添加试卷的题目</p>
			        <p>2.通过点击下方白色按钮添加试卷说明信息</p>
			        <p>3.拖动题目和说明信息排列好顺序后完成试卷</p>
			    </div>
			        <div id="paper_content">
			        </div>
			        <div class="clearfix">
			            <a href="#" class="btn_gray btn_space" id="btn_add_info">增加试卷说明内容</a>
			            <a href="#" class="btn_blue" id="save_paper">完成试卷</a>
			        </div>
			    </div>
			    <!-- end of paper_container -->
			    
			    <div class="table_container" id="table_container" style="margin-top:0;">
			    <div class="table_container_inner" id="table_container_inner">
			        <div class="dragger" id="dragger">
			            <div class="dragger_inner"></div>
			        </div>
			        <h2>请点击题目，将题目添加到试卷上。</h2>
			        <div class="question_search_container">
			            <label>章节:</label><input type="text" id="chapter" />&nbsp;&nbsp;
                        <label>知识点:</label><input type="text" id="knowledge"/>&nbsp;
                        <label>出题人:</label><input type="text" id="creator" />
                        <br />
                        <label>题型:</label><%=Html.DropDownList("search_type", ViewData["type"] as SelectList, "全部") %>&nbsp;&nbsp;&nbsp;&nbsp;
                        <label>语种:</label><%=Html.DropDownList("search_course", ViewData["course"] as SelectList, "全部") %>&nbsp;&nbsp;&nbsp;&nbsp;
                        <label>题目用途:</label><select id="TorE"><option value="">全部</option><option value="考试">考试</option><option value="练习">练习</option></select>
                        <a href="#" id="btn_query" class="btn_blue">查找</a>
                    </div>
			        <table id="infoTable">
			        <thead>
			            <tr>
			                <th class="col_type" width="10%">题型</th>
			                <th class="col_creator" width="8%">出题者</th>
			                <th class="col_course" width="10%">语种</th>
			                <th class="col_content" width="32%">题干</th>
			                <th class="col_chapter" width="10%">章节</th>
			                <th class="col_knowledge" width="20%">知识点</th>
			                <th class="col_TorE" width="10%">考试/练习</th>
			            </tr>
			        </thead>
			        <tbody>
			            <% foreach (var item in Model)
                          { %>
                            <tr data-id="<%=Html.Encode(item.eid) %>">
                                <td class="col_type"><%=Html.DisplayFor(modelItem => item.type)%></td>
                                <td class="col_creator"><%=Html.DisplayFor(modelItem => item.creator)%></td>
                                <td class="col_course"><%=Html.DisplayFor(modelItem => item.course)%></td>
                                <td class="col_content text_over" data-num="16"><%=Html.DisplayFor(modelItem => item.content)%></td>
                                <td class="col_chapter"><%=Html.DisplayFor(modelItem => item.chapter)%></td>
                                <td class="col_knowledge"><%=Html.DisplayFor(modelItem => item.knowledge)%></td>
                                <td class="col_TorE"><%=Html.DisplayFor(modelItem => item.TorE)%></td>
                                <td class="col_id"><%=Html.HiddenFor(modelItem => item.eid)%></td>
                            </tr>
			            <%} %>
			        </tbody>
			    </table>
			    </div>
			    </div><!-- end of table_container -->
			    <input type="hidden" id="begin_message" value="<%=TempData["begin_message"] %>"/>
			    <div class="scroll_wrap">
			        <a href="#" class="up" title="滚动到顶部">UP</a>
			        <a href="#" class="down" title="滚动到底部">DOWN</a>
			    </div>
			    <!-- content end here -->
			</form>
		    </div>
	    </div>
	    <!-- end page_center -->
    </div>
<script type="text/javascript" src="/Scripts/jquery-1.9.0.min.js"></script>
	<script src="/Scripts/jquery.ui.core.js"></script>
	<script src="/Scripts/jquery.ui.widget.js"></script>
	<script src="/Scripts/jquery.ui.mouse.js"></script>
	<script src="/Scripts/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="/Scripts/common.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        var all_question_template =
        {
            'ex_question':
            {
                '阅读理解': '<div class="q_ex_q"><label class="q_left">文章：</label><div class="q_right">_content_</div></div>',
                '完形填空': '<div class="q_ex_q"><label class="q_left">文章：</label><div class="q_right">_content_</div></div>',
                '翻译': '<div class="q_ex_q"><label class="q_left">原文：</label><div class="q_right">_content_</div></div>',
                '作文': '<div class="q_ex_q"><label class="q_left">作文要求：</label><div class="q_right">_content_</div></div>',
                '综合选择': '<div class="q_ex_q"><label class="q_left">题目：</label><div class="q_right">_content_</div></div>',
                '词语搭配': '<div class="q_ex_q"><label class="q_left">题干：</label><div class="q_right">_content_</div></div>'
            },
            'in_question':
            {
                'Icontent': '<label class="q_left">题目：</label><div class="q_right">_Icontent_</div>',
                'answer': '<label class="q_left">参考答案：</label><div class="q_right">_answer_</div>',
                'option1': '<label class="q_left choice_A">A:</label><div class="q_right choice_A">_option1_</div>',
                'option2': '<label class="q_left choice_B">B:</label><div class="q_right choice_B">_option2_</div>',
                'option3': '<label class="q_left choice_C">C:</label><div class="q_right choice_C">_option3_</div>',
                'option4': '<label class="q_left choice_D">D:</label><div class="q_right choice_D">_option4_</div>',
                'option5': '<label class="q_left choice_E">E:</label><div class="q_right choice_E">_option5_</div>',
                'option6': '<label class="q_left choice_F">F:</label><div class="q_right choice_F">_option6_</div>',
                'option7': '<label class="q_left choice_G">G:</label><div class="q_right choice_G">_option7_</div>',
                'option8': '<label class="q_left choice_H">H:</label><div class="q_right choice_H">_option8_</div>',
                'iid': '<input type="hidden" class="Iid replace_order" name="paperObject[00].Iid" value="_iid_" />'
            }
        };

        var object_form = '<label class="q_left">分值:</label><input type="text" name="paperObject[00].point" class="replace_order data_confirm score" data-confirm="required float" />'
                            + '<input type="hidden" class="replace_order POorder" name="paperObject[00].POorder" />';
        var info_form = '<div class="sortable paper_content info">'
                            + '<textarea class="replace_order PIcontent data_confirm" data-confirm="required reHTML" name="paperInfo[00].PIcontent"></textarea>'
                            + '<input type="hidden" class="replace_order PIorder" name="paperInfo[00].PIorder" />'
                            + '<input type="hidden" class="replace_order before"  name="paperInfo[00].before" />'
                            + '<div class="paper_content_remove_icon" title="移除该信息">X</div>'
                            + '</div>';

        /*
        * 定义一些函数
        */

        //题目列表移出来
        function moveOut() {
            var table_container = $('#table_container');
            table_container.attr('data-right', table_container.css('right')).animate({
                right: '0'
            }, 200);
            $('#dragger').one('click', moveIn).find('.dragger_inner').addClass('in');
        }

        //移回去
        function moveIn() {
            var table_container = $('#table_container');
            table_container.animate({
                right: table_container.attr('data-right')
            }, 200);
            $('#dragger').one('click', moveOut).find('.dragger_inner').removeClass('in');
        }

        //根据查询的内容请求ajax查询题目
        function queryExquestion() {
            var val_course = $('#search_course').val(),
                val_type = $('#search_type').val(),
                val_TorE = $('#TorE').val(),
                val_chapter = $('#chapter').val(),
                val_knowledge = $('#knowledge').val(),
                val_creator = $('#creator').val();
            var data = 'course=' + val_course
                     + '&type=' + val_type
                     + '&TorE=' + val_TorE
                     + '&chapter=' + val_chapter
                     + '&knowledge=' + val_knowledge
                     + '&creator=' + val_creator;
            $.ajax({
                type: 'post',
                url: '/Paper/PaperAddQueryQuestion/',
                data: data,
                dataType: 'json',
                success: function(ex_question_list) {
                    showQuestion(ex_question_list);
                },
                error: function() {
                    message("查找失败，请重试", "error", true, 5000);
                }
            });
            return false;
        }

        //将查询题目的结果插入到表中
        function showQuestion(ex_question_list) {
            //var ex_question_list = eval('('+ex_question_list+')');
            var table = $('#infoTable'),
                tbody = table.find('tbody'),
                ex_question;
            tbody.empty();
            if (ex_question_list.length == 0) {
                message('没有符合条件的题目，请重新查询', 'error', true, 5000);
                return false;
            }
            var ex_q_added_id = ' ';
            var ex_q_added = $('#paper_content').find('.ex_q');
            ex_q_added.each(function(index, elem) {
                ex_q_added_id += $(elem).attr('data-eid') + ' ';
            });
            for (var i = 0, iLen = ex_question_list.length; i < iLen; i++) {
                ex_question = ex_question_list[i];
                var tr = $('<tr data-id="' + ex_question.eid + '">'
                                + '<td class="col_type">' + (ex_question.type || '') + '</td>'
                                + '<td class="col_creator">' + (ex_question.creator || '') + '</td>'
                                + '<td class="col_course">' + (ex_question.course || '') + '</td>'
                                + '<td class="col_content">' + (ex_question.content.length < 17 ? ex_question.content : ex_question.content.substr(0, 16)) + '</td>'
                                + '<td class="col_chapter">' + (ex_question.chapter || '') + '</td>'
                                + '<td class="col_knowledge">' + (ex_question.knowledge || '') + '</td>'
                                + '<td class="col_TorE">' + (ex_question.TorE || '') + '</td>'
                                + '<td class="col_id"><input type="hidden" name="eid" value="' + ex_question.eid + '"/></td>'
                            + '</tr>');
                if (new RegExp('\ ' + ex_question.eid + '\ ').test(ex_q_added_id)) {
                    markRowAdded(tr);
                }
                tbody.append(tr);
            }
        }

        //通过eid获取整道题目的信息，包括小题
        function getWholeQuestion(eid) {
            $.ajax({
                type: 'post',
                url: '/Paper/PaperAddQuestion/',
                data: 'eid=' + eid,
                dataType: 'json',
                success: function(whole_question) {
                    addToPaper(whole_question);
                },
                error: function() {
                    message("查询题目失败，请重试", "error", true, 5000);
                }
            });
        }

        //将整道题目添加到试卷上去
        //目标：把question_data的数据套到question_template模板里面去，结果存在question_result里
        function addToPaper(question_data) {
            var eid = (question_data.eid) || 0;
            var question_result = '<div class="sortable paper_content ex_q" data-eid="' + eid + '">', //每道大题用div括起来
                question_type = question_data.type,
                in_question_template = all_question_template.in_question,
                ex_question_template = all_question_template.ex_question;

            //TODO:将数据库输出的内容转义
            // question_result += 大题的内容
            question_result += '<h3 class="ex_q_type">' + question_type + '</h3>'
                        + ex_question_template[question_type].replace('_content_', question_data.content.replace(/\n/g, '<br/>'));

            //循环，question_result += 小题的内容
            var array_in_question_data = question_data.inq || [];
            var in_question_data;
            for (var i = 0, iLen = array_in_question_data.length; i < iLen; i++) {
                in_question_data = array_in_question_data[i];
                question_result += '<div class="q_in_q">';
                var tmpData;
                $.each(in_question_data, function(name, value) {
                    if (in_question_data[name] != null && 'Icontent answer option1 option2 option3 option4 option5 option6 option7 option8 iid'.indexOf(name) > -1) {
                        tmpData = in_question_data[name].toString().replace('\n', '<br/>');
                        question_result += in_question_template[name].replace('_' + name + '_', tmpData);
                    }
                });
                question_result += object_form + '</div>';
            }
            question_result += '<div class="paper_content_remove_icon" title="移除该题">X</div></div>';
            question_result = $(question_result);
            $('#paper_content').append(question_result);
            $('.page_center').stop().animate({ scrollTop: $('.page_center_inner').height() - question_result.height() - 30 }, 'fast');
            question_result.css('opacity', '0').animate({ opacity: 1 }, 1000, 'linear');
        }

        //对小题和试卷信息内容排序
        function order_all_things() {
            var paper_content = $('#paper_content'),
                q_in_q = paper_content.find('.q_in_q'),
                info = paper_content.find('.info');
            var count_inq = 0,
                count_info = 0,
                need_replace;
            //排小题顺序
            q_in_q.each(function(index, elem) {
                need_replace = $(elem).find('.replace_order');
                need_replace.each(function(in_index, in_elem) {
                    in_elem = $(in_elem);
                    in_elem.attr('name', in_elem.attr('name').replace(/paperObject\[\d*\]/, 'paperObject[' + count_inq + ']'));
                    in_elem.hasClass('POorder') && in_elem.val(count_inq + 1);
                });
                count_inq++;
            });
            //  排信息顺序
            info.each(function(index, elem) {
                need_replace = $(elem).find('.replace_order');
                need_replace.each(function(in_index, in_elem) {
                    in_elem = $(in_elem);
                    in_elem.attr('name', in_elem.attr('name').replace(/paperInfo\[\d*\]/, 'paperInfo[' + count_info + ']'));
                    in_elem.hasClass('PIorder') && in_elem.val(count_info + 1);
                    in_elem.hasClass('before') && in_elem.val(in_elem.parent().nextAll('.ex_q:first').find('.q_in_q:first').find('.POorder').val() || -1);
                });
                count_info++;
            });

        }

        //切换试题的状态，表示已加入到试卷中
        function markRowAdded(tr) {
            $(tr).addClass('row_added').attr('title', '该题已添加到试卷中');
        }

        ////切换试题的状态，表示没加入到试卷中
        function notMarkRowAdded(eid) {
            var row_added = $('#infoTable').find('.row_added');
            row_added.each(function(index, elem) {
                if ($(elem).attr('data-id') == eid) {
                    $(elem).removeClass('row_added').removeAttr('title');
                }
            });
        }

        //计算整张试卷的总分数
        function getScore() {
            var obj_score = $('.score'),
                score = 0;
            obj_score.each(function(index, elem) {
                score += parseFloat($(elem).val());
            });
            return score || 0;
        }

        /* ============ question_conainer begin ============ */

        //滚动到顶部/底部
        $('.scroll_wrap').on('click', 'a', function() {
            if ($(this).hasClass('up')) {
                $('.page_center').animate({ scrollTop: 0 }, 200);
            } else {
                $('.page_center').animate({ scrollTop: $('.page_center_inner').height() }, 200);
            }
            return false;
        });

        //移出来，移回去
        $('#dragger').one('click', moveOut);

        //查找题目
        $('#btn_query').on('click', queryExquestion);
        //鼠标移上
        $('#infoTable').on('mouseenter', 'tr:gt(0)', function(event) {
            $(this).addClass('hover');
        })
        .on('mouseleave', 'tr:gt(0)', function(event) {
            $(this).removeClass('hover');
        })
        .on('click', 'tr:gt(0)', function(event) {
            if ($(this).hasClass('row_added')) {
                message('该题已经在这张试卷中存在了', 'error', true, 5000);
                return false;
            }
            var id = $(this).attr('data-id');
            getWholeQuestion(id);
            /*
            //题目移动的动画
            var clone = $(this).clone();
            $(this).before(clone);
            clone.css('position', 'absolute').animate({ 'left': '-140px', 'opacity': 0 }, '3000', function() { $(this).remove(); });
            */
            markRowAdded(this);
        });

        /* ============ question_conainer end ============ */
        /* ============ paper_container begin ============ */

        //鼠标移上
        $('#paper_content').on('mouseenter', '.paper_content', function() {
            $(this).addClass('paper_content_hover');
        })
        .on('mouseleave', '.paper_content', function() {
            $(this).removeClass('paper_content_hover');
        })
        //点击"X"删除
        .on('click', '.paper_content_remove_icon', function() {
            var content = $(this).parent('.paper_content');
            content.slideUp(100, function() {
                notMarkRowAdded(content.attr('data-eid'));
                content.remove();
            });
        });

        //拖动试题可以排序
        $('#paper_content').sortable({
            items: '.sortable', //指定哪些元素可以拖动排序
            placeholder: "paper_content_placeholder", //移动时的占位符
            stop: function() {  //移动结束时

            }
        });

        //增加试卷说明信息
        $('#btn_add_info').on('click', function() {
            $('#paper_content').append(info_form);
            return false;
        });

        //完成试卷
        $('#save_paper').on('click', function() {
            if ($('.paper_content').length == 0) {
                message('尚未添加任何题目或信息到试卷上', 'error', true, 5000);
                return false;
            }
            if (isInputOK()) {
                order_all_things();
                if (confirm('当前试卷总分为 ' + getScore() + ' ,确认提交试卷?')) {
                    document.getElementById('paper_form').submit();
                }
            }

        });
        /* ============ paper_container end ============ */
    });
</script>
</body>
</html>
